<template lang="html">
  <div class="header">
    <div class="back"><span class="iconfont">&#xe625;</span></div>
    <div class="seach"><span class="iconfont">&#xe632;</span> 输入城市/景点/游玩主题</div>
    <router-link to="/city">
        <div class="city">{{this.$store.state.city}}<span class="iconfont">&#xe6a6;</span></div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader'
}
</script>

<style lang="stylus" scoped>
  .header
    display: flex
    flex-direction: row
    height: .88rem
    line-height: .88rem
    color: #fff
    background: #00BCD4
    a
      color: #fff
    .back
      padding: 0 .2rem
    .seach
      flex: 1
      height: .64rem
      line-height: .64rem
      margin-top: .12rem
      color: #e4e7ea
      background: #fff
      padding-left: .1rem
      border-radius: .06rem
      cursor: auto
    .city
      padding: 0 .2rem
</style>
